<template>
  <h4 style="color: black">新增病虫害发生记录</h4>
  <hr class="newhr" />
  <!-- NewFrom 抽屉里表单 -->
  <el-form
    :model="RuleFormData"
    ref="form"
    :rules="rules"
    label-width="120px"
    size="default"
    :props="{
      label: (data) => {
        console.log('data', data)
      }
    }"
  >
    <div class="flex">
      <el-form-item label="动物名称">
        <el-input v-model="RuleFormData.zoonname" />
      </el-form-item>
      <el-form-item label="所属公园">
        <el-input v-model="RuleFormData.belongpark" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="RuleFormData.sex" />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="外文名">
        <el-input v-model="RuleFormData.englishname" />
      </el-form-item>
      <el-form-item label="别名">
        <el-input v-model="RuleFormData.othername" />
      </el-form-item>
      <el-form-item label="拉丁学名">
        <el-input v-model="RuleFormData.latinname" />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="门">
        <el-input v-model="RuleFormData.door" />
      </el-form-item>
      <el-form-item label="纲">
        <el-input v-model="RuleFormData.classgang" />
      </el-form-item>
      <el-form-item label="目">
        <el-input v-model="RuleFormData.eye" />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="科">
        <el-input v-model="RuleFormData.famify" />
      </el-form-item>
      <el-form-item label="属">
        <el-input v-model="RuleFormData.cagegory" />
      </el-form-item>
      <el-form-item label="种">
        <el-input v-model="RuleFormData.seed" />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="寿命">
        <el-input v-model="RuleFormData.lifetime" />
      </el-form-item>
      <el-form-item label="体重">
        <el-input v-model="RuleFormData.weight" />
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="RuleFormData.num" />
      </el-form-item>
    </div>
    <hr />
    <el-form-item el-form-item>
      <el-button type="success" @click="onsubmit" v-if="edata">修改</el-button>
      <el-button type="primary" @click="onsubmit" v-else>确定</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { FormRules } from 'element-plus'
import { onMounted } from 'vue'
import { BugRecordPost, BugRecordPut } from '@/api/ParkZoon/index'
import { ParkZoonType } from './types/ParkZoonMessage'

type CateType = Omit<ParkZoonType, 'children'>
const rules = reactive<FormRules<CateType>>({
  zoonname: [{ required: true, message: '请输入动物名称', trigger: 'blur' }],
  belongpark: [{ required: true, message: '请输入所属公园', trigger: 'blur' }],
  englishname: [{ required: true, message: '请输入外文名', trigger: 'blur' }],
  othername: [{ required: true, message: '请输入别名', trigger: 'blur' }],
  latinname: [{ required: true, message: '请输入拉丁学名', trigger: 'blur' }],
  door: [{ required: true, message: '请输入门', trigger: 'blur' }],
  classgang: [{ required: true, message: '请输入纲', trigger: 'blur' }],
  eye: [{ required: true, message: '请输入目', trigger: 'blur' }],
  famify: [{ required: true, message: '请输入科', trigger: 'blur' }],
  cagegory: [{ required: true, message: '请输入属', trigger: 'blur' }],
  seed: [{ required: true, message: '请输入种', trigger: 'blur' }],
  sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
  lifetime: [{ required: true, message: '请输入寿命', trigger: 'blur' }],
  weight: [{ required: true, message: '请输入体重', trigger: 'blur' }],
  num: [{ required: true, message: '请输入数量', trigger: 'blur' }]
})

const emit = defineEmits()

const RuleFormData: ParkZoonType = reactive({
  zoonname: '', //动物名称
  belongpark: '', //所属公园
  englishname: '', //外文名
  othername: '', //别名
  latinname: '', //拉丁学名
  door: '', //门
  classgang: '', //纲
  eye: '', //目
  famify: '', //科
  cagegory: '', //属
  seed: '', //种
  sex: '', //性别
  lifetime: '', //寿命
  weight: '', //体重
  num: '' //数量
})

const onsubmit = () => {
  // BugRecordPost(RuleFormData).then((res) => {
  //   emit('update:table-data', {
  //     ...RuleFormData,
  //     objectId: res.data.objectId
  //   })
  //   console.log(res);
  // })
  /////
  if (props.edata) {
    // 修改
    let { objectId } = props.edata
    BugRecordPut(objectId, RuleFormData).then(() => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId
      })
    })
  } else {
    //新增
    BugRecordPost(RuleFormData).then((res) => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId: res.data.objectId
      })
    })
  }
}

// 区分新增、编辑
// props数据具备单向性
type PropsType = {
  edata: ParkZoonType | null
}
const props = defineProps<PropsType>()
console.log('接收到了父级的props', props.edata)
onMounted(() => {
  if (props.edata) {
    //点击到了编辑按钮
    let {
      zoonname,
      belongpark,
      englishname,
      othername,
      latinname,
      door,
      classgang,
      eye,
      famify,
      cagegory,
      seed,
      sex,
      lifetime,
      weight,
      num
    } = props.edata
    RuleFormData.zoonname = zoonname
    RuleFormData.belongpark = belongpark
    RuleFormData.englishname = englishname
    RuleFormData.othername = othername
    RuleFormData.latinname = latinname
    RuleFormData.door = door
    RuleFormData.classgang = classgang
    RuleFormData.eye = eye
    RuleFormData.famify = famify
    RuleFormData.cagegory = cagegory
    RuleFormData.seed = seed
    RuleFormData.sex = sex
    RuleFormData.lifetime = lifetime
    RuleFormData.weight = weight
    RuleFormData.num = num
  } else {
    //点击到了新增按钮
    RuleFormData.zoonname = ''
    RuleFormData.belongpark = ''
    RuleFormData.englishname = ''
    RuleFormData.othername = ''
    RuleFormData.latinname = ''
    RuleFormData.door = ''
    RuleFormData.classgang = ''
    RuleFormData.eye = ''
    RuleFormData.famify = ''
    RuleFormData.cagegory = ''
    RuleFormData.seed = ''
    RuleFormData.sex = ''
    RuleFormData.lifetime = ''
    RuleFormData.weight = ''
    RuleFormData.num = ''
  }
})
</script>
<style>
.seekone {
  background-color: #2b59dd;
  color: white;
}

.backgauge {
  padding: 20px 30px;
}

.newhr {
  margin-bottom: 30px;
}
</style>
